<template>
  <div class="parent">
    <div class="header">
      <lx-header></lx-header>
    </div>
    <div class="middle">
      <div class="left">
        <lx-nav @changeRight="changeRight"></lx-nav>
      </div>
      <div :class="className">
          <manager-list></manager-list>
      </div>
    </div>
  </div>
</template>
<script>
  import Header from './common/Header.vue'
  import Nav from './common/Nav.vue'
  import ManagerList from './manager/ManagerList.vue'

  export default {
    data() {
      return {
        className:'right'
      }
    },
    components: {
      LxHeader: Header,
      LxNav: Nav,
      ManagerList: ManagerList
    },
    methods: {
      changeRight(value) {
        this.className = value
      }
    }
  }
</script>
<style scoped>
  .header { background: #f2f2f2; }
</style>
